<template>
  <div id="about">
   <el-form
     ref="form"
    :rules="formRules"
    :inline="true"
    :model="form"
    label-width="80px"
>
    <!-- 固定项目 -->
    <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" palceholder="请输入姓名">
        </el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" palceholder="请输入手机号">
        </el-input>
    </el-form-item>
    <el-button  plain @click="addItem" size="mini" type="primary">增加</el-button>
    <!-- 动态增加项目 -->
<!-- 不止一个项目，用div包裹起来 -->
<div v-for="(item, index) in form.dynamicItem" :key="index">
    <el-form-item
        label="姓名"
        :prop="'dynamicItem.' + index + '.name'"
        :rules="{
            required: true, message: '姓名不能为空', trigger: 'blur'
        }"
    >
        <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-form-item
        label="手机号"
        :prop="'dynamicItem.' + index + '.phone'"
        :rules="[
             {required: true, message: '手机号不能为空', trigger: 'blur'},
             { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]"
        >
        <el-input v-model="item.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button plain @click="addItem" size="mini" type="primary">增加</el-button>
           <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
    </el-form-item>
</div>
</el-form>

  </div>
</template>

<script>
export default {
   name: "Copy",
   data () {
      return {
        form: {
          name: '',
          phone: '',
          dynamicItem: []
          
        },
        formRules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ]
        }
      }
    },
    methods: {
    addItem () {
      this.form.dynamicItem.push({
        name: '',
        phone: ''
      })
    },
    deleteItem (item, index) {
      this.form.dynamicItem.splice(index, 1)
    }
}
  }
</script>

<style lang="scss" scoped>

</style>
